import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

class UserDetailPage extends StatefulWidget {
  const UserDetailPage({super.key});

  @override
  State<UserDetailPage> createState() => _UserDetailPageState();
}

final url =
    'https://p1.itc.cn/q_70/images01/20231107/59c1d879c4ba45e490ca6c5810a0ea65.jpeg';

class _UserDetailPageState extends State<UserDetailPage> {
  Size size = Size.zero;
  late double headerHeight;
  late double opacityHeight;

  var bigImgTop = -100.0;
  var scrollOffset = 0.0;
  var opacity = 0.0;

  final controller = ScrollController();

  @override
  void initState() {
    super.initState();
    controller.addListener(_scrollListen);
  }

  @override
  void dispose() {
    super.dispose();
    controller.removeListener(_scrollListen);
  }

  _scrollListen() {

    print('controller.offset = ${controller.offset}');

    /// 更新偏移
    setState(() => scrollOffset = controller.offset);

    /// 更新透明度
    var newOpacity = 0.0;
    if (scrollOffset < headerHeight - opacityHeight) {
      newOpacity = 1.0;
    } else if (scrollOffset > headerHeight) {
      newOpacity = 0.0;
    } else {
      newOpacity = (headerHeight - scrollOffset) / opacityHeight;
    }

    if (opacity != 1 - newOpacity) {
      setState(() => opacity = 1 - newOpacity);
    }
  }

  @override
  Widget build(BuildContext context) {
    if (size == Size.zero) {
      size = MediaQuery.of(context).size;
      headerHeight = size.height * 0.6;
      opacityHeight = size.height * 0.3;
      print('size0 = $size');
    }

    return Scaffold(
      body: Stack(
        children: [
          Positioned(
            top: bigImgTop - scrollOffset * 0.4,
            child: centerBigImg(url, size),
          ),
          ListView.builder(
            controller: controller,
            itemCount: 2,
            itemBuilder: (ctx, i) {
              if (i == 0) {
                return Container(
                  width: size.width,
                  height: headerHeight,
                  color: Colors.transparent,
                );
              }

              return Container(
                width: size.width,
                height: size.height,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(5),
                  border: Border.all(color: Colors.white, width: 1.0),
                  color: Colors.white,
                ),
              );
            },
          ),
          //  返回栏
          Positioned(
            top: 42,
            child: Container(
              width: size.width,
              height: 50,
              color: Color.fromARGB((opacity * 255.0).toInt(), 255, 0, 0),
              child: Text('111111'),
            ),
          ),
        ],
      ),
    );
  }

  centerBigImg(String imgUrl, Size size) {
    return CachedNetworkImage(
      width: size.width,
      height: size.height,
      fit: BoxFit.contain,
      imageUrl: imgUrl,

      /// TODO 加载中占位图
      placeholder: (context, url) => SizedBox(
        width: 24.0,
        height: 24.0,
        child: CircularProgressIndicator(strokeWidth: 2.0),
      ),

      /// TODO 加载失败图-占位图
      errorWidget: (context, url, error) => Icon(Icons.error),
    );
  }
}
